import React from "react";

const UserContext = React.createContext({
    nickName: "ff",
    age: 34
});

const ThemeContext = React.createContext({
    color: "red"
})

function ProfileHeader() {
    return (
        <UserContext.Consumer>
            {
                value => {
                    return (
                        <ThemeContext.Consumer>
                            {
                                themeValue => {
                                    return (
                                        <div>
                                            <h2>姓名：{value.nickName}</h2>
                                            <h2 style={{ color: themeValue.color }}>年龄：{value.age}</h2>
                                        </div>
                                    )
                                }
                            }
                        </ThemeContext.Consumer>
                    )
                }
            }
        </UserContext.Consumer>
    )
}

function Profile(props) {
    return (
        <div>
            <ProfileHeader></ProfileHeader>
            <ul>
                <li>设置1</li>
                <li>设置1</li>
                <li>设置1</li>
            </ul>
        </div>
    )
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            nickName: "czw--",
            age: 23
        }
    }

    render() {
        return (
            <div>
                <UserContext.Provider value={this.state}>
                    <ThemeContext.Provider value={{ color: "blue" }}>
                        <Profile></Profile>
                    </ThemeContext.Provider>
                </UserContext.Provider>
            </div>
        )
    }
}

export default App;